<template>
  <div class="city-wrapper">
    <template v-for="(item, index) in cityList[tabIndex].children">
      <span
        :class="cityList[tabIndex].selectedCity.indexOf(item.city) !== -1 ? 'active' : ''"
        @click="handleCityClick(item, index)"
        :key="item.id"
      >
        {{ item.city }}
      </span>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityArr: [], // 收集到城市选中的数据
    }
  },
  props: ['cityList', 'tabIndex'],
  methods: {
    handleCityClick(item, index) {
      if (this.cityList[this.tabIndex].selectedCity.indexOf(item.city) === -1) {
        this.cityList[this.tabIndex].selectedCity.push(item.city)
      } else {
        this.cityList[this.tabIndex].selectedCity.splice(
          this.cityList[this.tabIndex].selectedCity.indexOf(item.city),
          1
        )
      }
      console.log(this.cityList[this.tabIndex].selectedCity.length, '-------------------')
    },
  },
}
</script>

<style lang="scss" scoped>
.city-wrapper {
  display: flex;
  flex-wrap: wrap;
  span {
    margin: 5px;
    padding: 5px;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
  .active {
    background: gold;
  }
}
</style>
